<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选案例</title>
    <style>
        tbody tr{
            background-color: #f0f0f0;
        }
        tbody tr:hover{
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" id="j_cbAll"></th>
                    <th>孙哥</th>
                    <th>对线</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>孙一峰</td>
                    <td>F91</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>龙鸣</td>
                    <td>胎神</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $('#j_cbAll').click(function () {
            var checkedValue = $(this).prop('checked');
            $('.wrap > table > tbody input').prop('checked',checkedValue);
        });

        // 判断2个多选框是否都被选中了
        $('#j_tb input').click(function () {
            var numOfAll = $('#j_tb input').length;
            var numOfSelect = $('#j_tb input:checked').length;
            // if (numOfAll == numOfSelect) {
            //     $('#j_cbAll').prop('checked', true);
            // } else {
            //     $('#j_cbAll').prop('checked', false);
            // }
            $('#j_cbAll').prop('checked', numOfAll == numOfSelect);
        })
    })
</script>
</html>